<template>
  <div class="app-container">
    <!-- 拓展服务 -->
    <div>
      <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
        <span>服务名称：</span>
        <el-input style="width:2.2rem" v-model="searchModel.input" placeholder=""></el-input>
        <span class='move-right'>状态：</span>
        <el-form-item label="" prop="selectType">
          <el-select v-model="searchModel.selectType" placeholder="" style="width: 160px" @change="$forceUpdate()">
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button class="move-right" type="primary" @click="searchClick">查询
        </el-button>
        <el-button style="margin-left:20px" @click="resetSearch">重置
        </el-button>
      </el-form>
      <el-button style="margin-bottom:20px" type="info" @click="handleDownload">新增
      </el-button>
      <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit highlight-current-row
        >
        <el-table-column align='center' label='序号' >
          <template slot-scope='scope'>
            {{ scope.$index + 1 + pageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column label='服务名称'  align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label='URL'  align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.url }}</span>
          </template>
        </el-table-column>
        <el-table-column label='是否门禁扩展权限'  align='center'>
          <template slot-scope='scope'>
            {{ scope.row.accessExtendMark ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column class-name='status-col' label='状态'  align='center'>
          <template slot-scope='scope'>
            <el-tag>{{ scope.row.state ? "启用" : "禁用" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at1' label='创建人' >
          <template slot-scope='scope'>
            <span>{{}}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at' label='创建时间' >
          <template slot-scope='scope'>
            <i class='el-icon-time' />
            <span>{{ scope.row.creationTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at2' label='操作' width='240'>
          <template slot-scope='scope'>
            <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
            <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="prev, pager,next,sizes,jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog title="新增拓展服务" :visible.sync="dialogFormVisible" width="30%">
        <el-form :label-width="labelWidth" :model="inputModel" :rules="rules">
          <el-form-item label="服务名称:" prop="serviceName">
            <el-input class="input-width" v-model="inputModel.serviceName"></el-input>
          </el-form-item>
          <el-form-item label="CODE:" prop="codeName">
            <el-input class="input-width" v-model="inputModel.codeName"></el-input>
          </el-form-item>
          <el-form-item label="URL:" prop="urlName">
            <el-input class="input-width" v-model="inputModel.urlName"></el-input>
          </el-form-item>
          <el-form-item label="扩展权限:" prop="urlName">
            <el-checkbox v-model="inputModel.checked">是否门禁扩展权限</el-checkbox>
          </el-form-item>
          <el-form-item label="状态:" prop="radio">
            <el-radio v-model="inputModel.radio" label="1">启用</el-radio>
            <el-radio v-model="inputModel.radio" label="2">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="insertExtendService">提交</el-button>
          <el-button style="margin-top:1rem;" @click="dialogFormVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getApiExtendPagelist,
  deleteApiExtendService,
  insertApiExtendService
} from '@/api/ExtendServices'

import { parseTime } from '@/utils';

export default {
  data() {
    return {
      listLoading: false,
      //获取输入的查询条件
      searchModel: {
        input: '',
        selectType: '',
      },
      //获取新增的信息
      inputModel: {
        id: '',
        serviceName: '',
        codeName: '',
        urlName: '',
        checked: true,
        radio: '1',
      },
      //控制弹出层
      dialogFormVisible: false,
      labelWidth: "90px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      //状态
      types: [
        {
          value: -1,
          label: '请选择'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 0,
          label: '禁用'
        },
      ],
      rules: {
        serviceName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
        codeName: [{ required: true, message: '请输入CODE', trigger: 'blur' }],
        urlName: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
      list: [],
    }
  },
  created() {
    this.getExtendServiceList();
  },
  methods: {
    searchClick(){
      this.currentPage = 1;
      this.getExtendServiceList();
    },
    insertExtendService() {
      if (this.inputModel.serviceName.length == 0) return this.$message.error("请输入服务名称");
      if (this.inputModel.codeName.length == 0) return this.$message.error("请输入Code");
      if (this.inputModel.urlName.length == 0) return this.$message.error("请输入Url");
      let data = {
        name: this.inputModel.serviceName,
        extendServiceNo: this.inputModel.codeName,
        url: this.inputModel.urlName,
        accessExtendMark: this.inputModel.checked ? 1 : 0,
        state: this.inputModel.radio == "1" ? 1 : 0,
      }
      if (this.inputModel.id) {
        data.id = this.inputModel.id;
      }
      console.log(data);
      insertApiExtendService(data).then(res => {
        this.dialogFormVisible = false;
        this.getExtendServiceList();
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        this.inputModel = {
          id: '',
          serviceName: '',
          codeName: '',
          urlName: '',
          checked: true,
          radio: '1',
        }
      });
    },
    resetSearch() {
      this.searchModel = {
        input: '',
        selectType: '',
      }
    },
    getExtendServiceList() {
      let data = {
        skipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
        MaxResultCount: this.pageSize
      };
      if (this.searchModel.input.length != 0) {
        data.name = this.searchModel.input;
      }
      if (this.searchModel.selectType != "请选择" && this.searchModel.selectType != -1) {
        data.state = this.searchModel.selectType
      }
      getApiExtendPagelist(data).then(res => {

        this.list = res.items;
        this.total = res.totalCount;
        console.log(this.list);
        this.list.forEach(element => {
          element.creationTime = parseTime(new Date(element.creationTime), '{y}-{m}-{d} {h}:{i}:{s}');
        });
      });
    },
    handleSizeChange(v) {
      console.log(v);
      this.pageSize = v;
      this.currentPage = 1;
      this.getExtendServiceList();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getExtendServiceList();
    },
    handleDownload() {
      this.dialogFormVisible = true;
    },
    handleEdit(index, data) {
      this.inputModel.id = data.id;
      this.inputModel.serviceName = data.name;
      this.inputModel.urlName = data.name;
      this.inputModel.codeName = data.extendServiceNo;
      this.inputModel.checked = data.accessExtendMark ? true : false;
      this.inputModel.radio = String(data.state);
      this.dialogFormVisible = true;
    },
    handleDelete(index, data) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteApiExtendService(data.id).then(res => {
          this.getExtendServiceList();
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  // float: left;
  margin-left: .8rem;
  margin-top: .9rem;
}

.block {
  margin-right: .2rem;
    display: flex;
    justify-content: flex-end;
}

.input-width {
  width: 404px;
}

.move-right {
  margin-left: .5rem;
}
</style>
